<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #container {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
  }

  .activity {
    opacity: 0;
    height: 0;
    transition: 300ms all ease;
    position: absolute;
    pointer-events: none;
    left: 50%;
    top: 4.8rem;
    transform: translatex(-50%);
  }

  .activity .item {
    max-height: 0;
    opacity: 0;
    margin: 1rem;
    padding: 2rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.8rem;
    text-align: left;
    background: rgba(54, 47, 33, 0.1);
    outline: 2px solid orangered;
    border-radius: 0.6rem;
    transition: 300ms background ease-in-out;
  }

  .activity .item:hover {
    background: rgba(54, 47, 33, 0.05);
  }

  .activity .item p {
    margin: 0;
  }

  .active .activity {
    opacity: 1;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }

  .active .activity .item {
    animation: 800ms ease-in 500ms 1 forwards itemLoad;
  }

  button {
    font-size: 1.8rem;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.1rem;
    padding: 1.2rem 2.4rem;
    border: none;
    border-radius: 0.8rem;
    color: #362f21;
    border: 0.2rem solid #362f21;
    background: none;
    position: relative;
    cursor: pointer;
    min-width: 0;
    min-height: 0;
    transition: 300ms color ease-in-out, 300ms background ease-in-out, 300ms min-width 0ms ease-in-out, 300ms min-height 300ms ease-in-out;
  }

  button .buttonText {
    position: relative;
    top: 0;
    transition: 300ms top 280ms ease-in-out;
  }

  button::before {
    content: "3";
    letter-spacing: 0;
    color: #e6e1d6;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding: 0 0.7rem;
    height: 2.4rem;
    background: radial-gradient(orangered 50%, red 75%);
    border-radius: 1.2rem;
    position: absolute;
    top: -1.2rem;
    left: 0.7rem;
  }

  button:hover {
    background: #362f21;
    color: #e6e1d6;
  }

  button:focus,
  button:active {
    background: #e6e1d6;
    color: #362f21;
  }

  .active button {
    min-width: 36rem;
    min-height: 36rem;
  }

  .active button:hover {
    background: #e6e1d6;
    color: #362f21;
  }

  .active button::before {
    animation: 600ms ease-in 500ms 1 forwards notiPop;
  }

  .active button .buttonText {
    top: -15rem;
  }

  .clicked:not(.active) button::before {
    display: none;
  }

  @keyframes itemLoad {
    to {
      opacity: 1;
      max-height: 20rem;
      outline: 2px solid transparent;
    }
  }

  @keyframes notiPop {
    to {
      transform: scale(0);
    }
  }

  body {
    height: 100vh;
    margin: 0;
    background: #e6e1d6;
    font-family: "Inter", sans-serif;
  }

  html {
    font-size: 62.5%;
  }
</style>

<body>
  <div id="container">
    <button type="button">

      <section class="activity">
        <div class="item">
          <p><a href="#">Rachel</a>, <a href="#">Derek</a>, <a href="#">Maria</a>, and <a href="#">4 other users</a>
            loved your pen "<a href="#">Untitled</a>"</p>
        </div>
        <div class="item">
          <p>8 users added your pen "<a href="#">Untitled</a>" to a collection.</p>
        </div>
        <div class="item">
          <p><a href="#">Marques</a>, <a href="#">Greg</a>, <a href="#">Penny</a>, and <a href="#">16 other users</a>
            loved your pen "<a href="#">Untitled II</a>"</p>
        </div>
      </section>

      <span class="buttonText">Activity</span>

    </button>
  </div>

  <script>
    const trigger = document.getElementById("container");
    trigger.addEventListener("click", (event) => {
      trigger.classList.add("clicked");
      trigger.classList.toggle("active");
    });

  </script>
</body>

</html>